<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/public.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>
    <script type="text/javascript" src="/js/system/index.js"></script>

    <#-- 导入百度编辑器 -->
    <link href="/js/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>


    <script type="text/javascript" src="/js/system/wenda_publish.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script>

        var destData;


        $(function () {

            // 发送请求
            $.get("/wenda/getRegion", function (data) {
                $(".dest_loading").css("display", "none");
                destData = data;
                initDestClick(data);
                loadDestData("dest_hot", data);

                // 清空选中地区数据
                $(".rightRowDiv").html("");
            });

            // 输入框编辑时显示目的地弹框
            $('._j_mdd').on('click', function () {
                $("._j_mdd_list_div").css("display", "block");
            });


            $("._j_mdd_list_div").on('mouseout', function () {
                $("._j_mdd_list_div").css("display", "none");
            }).on('mouseover', function () {
                $("._j_mdd_list_div").css("display", "block");
            })
        })


        // 初始化目的地点击事件
        function initDestClick(data) {
            $('._j_mdd_tap_ul li').each(function (index, ele) {
                $(ele).on('click', function () {
                    // 控制属性显示
                    $('._j_mdd_tap_ul li').removeClass("on");
                    $(this).addClass("on");
                    // 加载数据
                    var dataId = $(this).data("id");
                    loadDestData(dataId, data);

                    // 清空选中地区数据
                    $(".rightRowDiv").html("");
                })
            })
        }

        // 加载目的地数据
        function loadDestData(dataId, data) {
            var destStr = "";
            if (dataId == "dest_hot") { // 加载热门数据
                var hotDest = data["hotDests"];
                for (var i = 0; i < hotDest.length; i++) {
                    // 获取地区数据
                    var ele = hotDest[i];

                    var json=encodeURI(JSON.stringify(ele));
                    destStr += ' <li><a onclick="initSubList(\''+json+'\')">' + ele["name"] + '</a></li>';
                }

            } else if (dataId == "dest_china") { // 加载国内数据
                // 获取国内数据
                var chinaDest = data["islandDests"];
                for (var i = 0; i < chinaDest.length; i++) {
                    var ele = chinaDest[i];
                    // 将当前标签数据封装成json
                    var json=encodeURI(JSON.stringify(ele));
                    destStr += ' <li><a onclick="initSubList(\''+json+'\')">' + ele["name"] + '</a></li>';
                }
            } else if (dataId == "dest_international") { // 加载国际数据
                // 获取国际数据
                var regions = data["regions"];
                for (var i = 0; i < regions.length; i++) {
                    var ele = regions[i];
                    var json=encodeURI(JSON.stringify(ele));
                    destStr += ' <li><a onclick="initSubList(\''+json+'\')">' + ele["name"] + '</a></li>';
                }
            }
            $("#dest_list").html(destStr);

        }

        // 保存选中的目的地
        var selectDestId;

        function initSubList(data){
            var json=JSON.parse(decodeURI(data));

            if(json){
                // 1. 查看当前地区下是否还有子地区，有则重新显示地区列表
                var childrens=json.children;
                var length=childrens.length;

                if(length>0){
                    var destStr="";
                    for (var i = 0; i < length; i++) {
                        // 获取数据
                        var ele = childrens[i];
                        if(ele){
                            var jsonStr=encodeURI(JSON.stringify(ele));
                            destStr += ' <li><a onclick="initSubList(\''+jsonStr+'\')">' + ele["name"] + '</a></li>';
                        }
                    }
                    $("#dest_list").html(destStr);
                }else{
                    selectDestId=json.id;
                    $("._j_mdd").val(json.name); //显示选中的地区
                    $("._j_mdd_list_div").css("display", "none");
                }
                // console.log(jsonStr);
                // console.log(jsonStr.name);
                // // 显示选中的地区
                // $(".rightRowDiv").append("<span style=\"display: inline;\">&gt;</span>");
                // $(".rightRowDiv").append("<a data-id=\"\" style=\"display: inline;\">"+jsonStr.name+"</a>");

            }
        }

        // 初始化提问标签的点击事件
        $(function () {
            $("#wendaTags a").click(function () {
                $("#wendaTags a").removeClass("on");
                $(this).addClass("on");
            })
        })

        // 初始化匿名提交按钮显示
        $(function () {
            $("._j_anonymous").click(function () {
                var sign=$(this).hasClass("active");
                if(sign){
                    $(this).removeClass("active");
                }else{
                    $(this).addClass("active");
                }
            })
        })


        $(function () {
            //保存或发表
            $(".btn_submit").click(function () {

                // 获取选中的标签
                var tagId;
                $("#wendaTags a").each(function (index, ele) {
                    if($(this).hasClass("on")){
                        tagId=$(this).data("id");
                    }
                });

                if(!tagId){ // TODO 提示需要选择标签
                    popup("请选择标签");
                    return;
                }

                // if(!selectDestId){ // 提示需要选择目的地
                //     popup("必须选择目的地");
                //     return;
                // }

                $("#inputForm input[name=tagId]").val(tagId);
                $("#inputForm input[name='dest.id']").val(selectDestId);
                // 设置是否匿名
                var isHideName=$("._j_anonymous").hasClass("active");
                $("#inputForm input[name=isHideName]").val(isHideName);
                // 获取输入富文本数据

                $("#inputForm").ajaxSubmit(function (data) {
                    if(data.success){
                        window.location.href = "/wenda/wendaDetail?id=" + data.data
                    }else{
                        popup("操作失败");
                    }
                })
            })
        })




    </script>

</head>

<body style="position: relative;">

<!-- 顶部栏 -->
<#assign currentNav="wenda">
<#include "../common/navbar.ftl">


<div class="wrapper" id="_js_qa_wrapper" data-is_bind_mobile="0" data-ask_uid="0">
    <div class="qt-container clearfix">
        <!-- 提问主要内容 -->
        <div class="qt-main">

            <!-- 面包屑导航 -->
            <div class="crumb">
                <a href="/wenda/">旅游问答</a> &gt; <span>我要提问</span>
            </div>

            <#-- 提交问题表单数据 -->
            <form id="inputForm" method="post" action="/wenda/saveOrUpdate">
                <input type="hidden" name="dest.id" value="">
                <input type="hidden" name="isHideName" value="">
                <input type="hidden" name="tagId" value="">

                <!-- 问题标题 -->
                <div class="qt-tit">
                    <h5>问题标题</h5>
                    <div class="qt-con">
                        <input type="text" name="title" placeholder="标题不小于10字哦" class="_j_title">
                        <span class="count"><span class="_j_title_num">0</span>/80 字</span>
                        <span class="error err-tips _j_title_error hide"></span>
                    </div>
                </div>

                <!-- 选择目的地 -->
                <div class="qt-mdd _qa_block" id="_qa_mdd">
                    <h5>选择目的地</h5>

                    <div class="qt-con _qa_select" id="_qa_select_mdds">

                        <input type="text" placeholder="" class="_j_mdd">

                        <ul class="mdds_search_list _j_mdd_option _qa_mdds_search_list hide"></ul>

                        <div class="qt-mdd-option _j_mdd_list_div" style="display: none;">
                            <div class="tabs">
                                <ul class="_j_mdd_tap_ul">
                                    <li class="on _j_mdd_tap" data-id="dest_hot"><a>热门</a></li>
                                    <li class="_j_mdd_tap" data-id="dest_china"><a>国内</a></li>
                                    <li class="_j_mdd_tap" data-id="dest_international"><a>国际</a></li>
                                </ul>

                                <div class="location hide _qa_mddselect_position rightRowDiv" style="display: block">
                                </div>

                                <#-- <div class="location hide _qa_mddselect_position" style="display: block;">
                                     <span>&gt;</span>
                                     <a data-id="" style="display: inline;">亚洲</a>
                                     <span style="display: inline;">&gt;</span>
                                     <span class="_qa_loc3">日本</span>
                                 </div>-->
                            </div>

                            <div style="position: relative; height: 170px;">
                                <div class="qt-place" id="_qa_select_mdds_list"
                                     style="position: relative; overflow-y: hidden;">

                                    <#-- 显示地区列表 -->
                                    <div class="qt-place-item">
                                        <ul class="clearfix" id="dest_list"></ul>
                                    </div>
                                </div>
                                <div style="position: absolute; top: 62px; right: 0px; padding: 1px; opacity: 0; display: block; height: 106.25px;">
                                    <div style="width:5px; height:100%; background:#ccc;border-radius: 10px;"></div>
                                </div>
                            </div>

                            <div class="ajax_loading hide _qa_ajax_loading dest_loading">
                                <i class="i1"></i>
                                <i class="i2"></i>
                                <i class="i3"></i>
                            </div>

                        </div>
                        <div class="qt-error"><span class="_j_mdd_error">请选择目的地！</span></div>
                    </div>
                </div>

                <#-- 兴趣标签 -->
                <div class="qt-interest _qa_block" id="_qa_interest">
                    <h5>选择兴趣标签</h5>
                    <div class="qt-con _j_interest_list">
                        <dl class="interest-description">
                            <dt><i></i><span>什么是兴趣标签</span></dt>
                            <dd>兴趣标签是一个问题的类型，它有助于为你的问题匹配擅长该类问题的蜂蜂回答。目前仅开放了以下几个话题，更多类型我们会逐步开放。</dd>
                        </dl>
                        <div class="interest-tags" id="wendaTags">
                            <#list tags as t>
                                <a class="btn-interest _j_interest" data-id="${t.id}"><i></i>${t.name}</a>
                            </#list>
                        </div>
                    </div>
                </div>


                <!-- 问题详细内容 -->
                <div class="qt-details" id="_qa_detail">
                    <h5><a title="添加问答内容" class="icon" id="_j_show_content"></a>问题详细内容</h5>

                    <#-- 编辑框 -->
                    <dl class="body cf">
                        <dd id="content_div">
                            <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
                        </dd>
                    </dl>
                </div>


                <!-- 通知 -->
                <div class="qt-notice">
                    <div class="checkbox _j_anonymous"></div>
                    <p>匿名提问（其他用户将不会在你的窝里看到这个问题）</p>
                </div>

            </form>


            <#-- <div class="qt-notice _qa_block" id="_qa_notice">
                 <div class="checkbox _j_mobile active"></div>
                 <p>收到答案时短信通知我</p>
             </div>-->

            <!-- 发布按钮 -->
            <div class="publish_question btn_submit">
                <a class="qt-post-btn _j_publish" title="发布问题">发布问题</a>
            </div>

        </div>

        <!-- 提问侧边栏 -->
        <div class="qt-sider">
            <div class="qts-tit">提问的正确姿势</div>
            <div class="qts-con">
                <p>1.问题要【具体】【真实】【诚恳】，问题较多，需全面阐述时，可以添加问题补充。结伴/交易/与旅行无关的提问将被删除。</p>
                <p>2.给问题添加目的地，并打上正确的标签将有助于更快地获得回答。</p>
            </div>
        </div>
    </div>
</div>

<!-- 尾部内容 -->
<#include "../common/footer.ftl">

</body>

</html>